<template>
  <div class="demo-select-create">
    <div class="column-divider">
      <div class="demo-button-line">
        <div class="d-title">自定义选项</div>
        <e-select
          allow-create
          allow-delete
          @on-create="handleCreate"
          @on-delete="handleDelete"
          style="width:300px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value">{{ item.label }}</e-option>
        </e-select>
      </div>
    </div>
    
    <!-- <div
      class="column-divider"
      style="margin-top: 30px">
      <div class="demo-button-line">
        <div class="d-title">自定义操作：单选</div>
        <Select
          has-operation
          v-model="singleValue"
          style="width:300px">
          <Option
            v-for="item in cityList1"
            :value="item.value"
            :key="item.value">{{ item.label }}</Option>
          <div
            slot="itemFooter"
            class="refresh-item"
            @click="onSingleRefresh">
            <b-icon custom="cmss-icon icon-huifuzhixing"></b-icon>
            <span>刷新</span>
          </div>
        </Select>
        <span>{{ singleValue }}</span>
      </div>
      <div class="demo-button-line">
        <div class="d-title">自定义操作：多选</div>
        <Select
          has-operation
          multiple
          v-model="multiValue"
          style="width:300px">
          <Option
            v-for="item in cityList2"
            :value="item.value"
            :key="item.value">{{ item.label }}</Option>
          <div
            slot="itemFooter"
            class="refresh-item"
            @click="onMultiRefresh">
            <b-icon custom="cmss-icon icon-huifuzhixing"></b-icon>
            <span>刷新</span>
          </div>
        </Select>
        <span>{{ multiValue }}</span>
      </div>

    </div> -->
  </div>
</template>
<script>
export default {
  name: 'DemoSelectSize',
  data () {
    return {
      cityList: [
        {
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        },
        {
          value: 'Sydney',
          label: 'Sydney'
        },
        {
          value: 'Ottawa',
          label: 'Ottawa'
        },
        {
          value: 'Paris',
          label: 'Paris'
        },
        {
          value: 'Canberra',
          label: 'Canberra'
        }
      ],
      cityList1: [
        {
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        },
        {
          value: 'Sydney',
          label: 'Sydney'
        },
        {
          value: 'Ottawa',
          label: 'Ottawa'
        },
        {
          value: 'Paris',
          label: 'Paris'
        },
        {
          value: 'Canberra',
          label: 'Canberra'
        }
      ],
      cityList2: [
        {
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        },
        {
          value: 'Sydney',
          label: 'Sydney'
        },
        {
          value: 'Ottawa',
          label: 'Ottawa'
        },
        {
          value: 'Paris',
          label: 'Paris'
        },
        {
          value: 'Canberra',
          label: 'Canberra'
        }
      ],
      singleValue: '',
      multiValue: []
    }
  },
  methods: {
    handleCreate (val) {
      let result = this.cityList.some(item => item.value === val)
      if (!result) {
        this.cityList.push({
          value: val,
          label: val
        })
      }   
    },
    handleDelete (val) {
      this.cityList = this.cityList.filter(item => item.value !== val.value)
    },
    onSingleRefresh () {
      this.cityList1 = [
        {value: 'Suzhou', label: '苏州'},
        {value: 'Shanghai', label: '上海'}
      ]
    },
    onMultiRefresh () {
      this.cityList2 = [
        {value: 'Beijing', label: '北京'},
        {value: 'Nanjing', label: '南京'},
        {value: 'Tianjin', label: '天津'},
        {value: 'Wuhan', label: '武汉'}
      ]
    }
  }
}
</script>
<style>
.demo-select-create .demo-button-line .d-title {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color:rgba(98,54,255,1);
  width: 10rem;
  margin-bottom: 5px;
}

.refresh-item:hover {
  color: #337DFF;
}

.refresh-item .ivu-icon {
  margin-right: 8px;
}
</style>
